@import '../../styles/variables';

// Preview Player Styles
.preview-player {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: @gray-900;

  .preview-area {
    flex: 1;
    position: relative;
    background: @black;
    display: flex;
    align-items: center;
    justify-content: center;

    .preview-placeholder {
      text-align: center;
      color: @gray-500;

      .placeholder-icon {
        margin-bottom: @spacing-md;
      }

      .placeholder-text {
        font-size: @font-size-lg;
        font-weight: 500;
        margin-bottom: @spacing-xs;
      }

      .placeholder-subtext {
        font-size: @font-size-sm;
        opacity: 0.8;
      }
    }

    .preview-video {
      width: 100%;
      height: 100%;
      position: relative;

      .video-container {
        width: 100%;
        height: 100%;
        position: relative;

        .preview-element {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .playback-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: fade(@black, 30%);
          opacity: 0;
          transition: opacity @transition-fast;

          &:hover {
            opacity: 1;
          }

          .play-button {
            background: fade(@white, 20%);
            border: none;
            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all @transition-fast;

            &:hover {
              background: fade(@white, 30%);
              transform: scale(1.1);
            }

            svg {
              color: @white;
            }
          }

          .playback-rate-indicator {
            position: absolute;
            top: @spacing-md;
            right: @spacing-md;
            background: fade(@black, 70%);
            color: @white;
            padding: @spacing-xs @spacing-sm;
            border-radius: @border-radius;
            font-size: @font-size-sm;
            font-weight: 500;
          }
        }
      }
    }
  }

  .playback-controls {
    height: 60px;
    background: @gray-800;
    display: flex;
    align-items: center;
    padding: 0 @spacing-lg;
    gap: @spacing-lg;

    .control-group {
      display: flex;
      align-items: center;
      gap: @spacing-sm;

      .control-btn {
        background: transparent;
        border: none;
        color: @gray-400;
        cursor: pointer;
        padding: @spacing-xs;
        border-radius: @border-radius;
        transition: all @transition-fast;

        &:hover:not(:disabled) {
          background: fade(@white, 10%);
          color: @white;
        }

        &:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }

        &.play-pause-btn {
          background: @primary-color;
          color: @white;

          &:hover:not(:disabled) {
            background: @primary-color-dark;
          }
        }
      }
    }

    .time-display {
      display: flex;
      align-items: center;
      gap: @spacing-xs;
      color: @gray-300;
      font-family: 'Courier New', monospace;
      font-size: @font-size-sm;

      .current-time {
        color: @white;
      }
    }

    .progress-container {
      flex: 1;
      position: relative;
      height: 4px;
      background: @gray-700;
      border-radius: 2px;
      cursor: pointer;

      .progress-slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: @primary-color;
        border-radius: 2px;
        transition: width @transition-fast;
      }
    }

    .volume-controls {
      display: flex;
      align-items: center;
      gap: @spacing-sm;

      .volume-slider {
        width: 80px;
        height: 4px;
        background: @gray-700;
        border-radius: 2px;
        outline: none;
        cursor: pointer;

        &::-webkit-slider-thumb {
          appearance: none;
          width: 12px;
          height: 12px;
          background: @white;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }

    .playback-rate-controls {
      .rate-select {
        background: @gray-700;
        border: 1px solid @gray-600;
        border-radius: @border-radius;
        color: @white;
        padding: @spacing-xs @spacing-sm;
        font-size: @font-size-sm;
        cursor: pointer;

        &:focus {
          outline: none;
          border-color: @primary-color;
        }
      }
    }
  }
}

// Effects Panel Styles
.effects-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: @white;

  .panel-header {
    padding: @spacing-lg;
    border-bottom: 1px solid @border-color;

    .panel-title {
      display: flex;
      align-items: center;
      gap: @spacing-sm;
      font-size: @font-size-lg;
      font-weight: 600;
      color: @gray-900;
      margin: 0 0 @spacing-xs 0;
    }

    .panel-description {
      font-size: @font-size-sm;
      color: @gray-600;
      margin: 0;
    }
  }

  .effects-list {
    flex: 1;
    overflow-y: auto;
    padding: @spacing-md;

    .effect-item {
      border: 1px solid @border-color;
      border-radius: @border-radius;
      margin-bottom: @spacing-sm;
      overflow: hidden;

      .effect-header {
        padding: @spacing-md;
        cursor: pointer;
        background: @gray-50;
        transition: background @transition-fast;

        &:hover {
          background: @gray-100;
        }

        .effect-info {
          display: flex;
          align-items: center;
          gap: @spacing-md;

          .effect-icon {
            width: 32px;
            height: 32px;
            background: @primary-color;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: @white;
          }

          .effect-details {
            flex: 1;

            .effect-name {
              font-size: @font-size-sm;
              font-weight: 500;
              color: @gray-900;
              display: block;
            }

            .effect-status {
              font-size: @font-size-xs;
              color: @gray-500;
            }
          }
        }

        .effect-actions {
          display: flex;
          align-items: center;
          gap: @spacing-xs;

          .toggle-btn {
            padding: @spacing-xs @spacing-sm;
            border: 1px solid @border-color;
            border-radius: 4px;
            font-size: @font-size-xs;
            cursor: pointer;
            transition: all @transition-fast;

            &.enabled {
              background: @green-100;
              border-color: @green-300;
              color: @green-700;
            }

            &.disabled {
              background: @gray-100;
              color: @gray-600;
            }
          }

          .remove-btn {
            padding: @spacing-xs;
            border: 1px solid @border-color;
            border-radius: 4px;
            background: @white;
            color: @gray-600;
            cursor: pointer;
            transition: all @transition-fast;

            &:hover {
              border-color: @red-300;
              color: @red-600;
            }
          }
        }
      }

      .effect-controls {
        padding: @spacing-md;
        background: @white;
        border-top: 1px solid @border-color;

        .parameter-item {
          margin-bottom: @spacing-md;

          &:last-child {
            margin-bottom: 0;
          }

          .parameter-label {
            display: block;
            font-size: @font-size-sm;
            font-weight: 500;
            color: @gray-700;
            margin-bottom: @spacing-xs;
          }

          .parameter-controls {
            display: flex;
            align-items: center;
            gap: @spacing-md;

            .parameter-slider {
              flex: 1;
              height: 4px;
              background: @gray-300;
              border-radius: 2px;
              outline: none;

              &::-webkit-slider-thumb {
                appearance: none;
                width: 16px;
                height: 16px;
                background: @primary-color;
                border-radius: 50%;
                cursor: pointer;
              }
            }

            .parameter-value {
              min-width: 40px;
              text-align: center;
              font-size: @font-size-sm;
              color: @gray-600;
            }
          }
        }
      }
    }
  }

  .add-effects {
    padding: @spacing-md;
    border-top: 1px solid @border-color;

    .add-title {
      font-size: @font-size-base;
      font-weight: 600;
      color: @gray-900;
      margin: 0 0 @spacing-md 0;
    }

    .effects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: @spacing-sm;

      .effect-preset-btn {
        padding: @spacing-md;
        background: @gray-50;
        border: 1px solid @border-color;
        border-radius: @border-radius;
        cursor: pointer;
        transition: all @transition-fast;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: @spacing-xs;

        &:hover {
          background: @gray-100;
          border-color: @primary-color;
          transform: translateY(-1px);
        }

        .preset-icon {
          width: 40px;
          height: 40px;
          background: @primary-color;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: @white;
        }

        .preset-name {
          font-size: @font-size-sm;
          font-weight: 500;
          color: @gray-900;
        }
      }
    }
  }
}